<template>
  <div>
    <el-select class="mar-r-3" v-model="selectProvinceCode" filterable placeholder="请选择省份"
      @change="changeCity(false,selectProvinceCode)">
      <el-option v-for="item in provinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
      </el-option>
    </el-select>
    <el-select class="mar-r-3" v-model="selectCityCode" filterable placeholder="请选择城市"
      @change="changeDistrict(false,selectCityCode)">
      <el-option v-for="item in cityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
      </el-option>
    </el-select>
    <el-select v-model="selectDistrictCode" filterable placeholder="请选择区县" @change="changeStreet(selectDistrictCode)">
      <el-option v-for="item in districtList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
      </el-option>
    </el-select>
  </div>
</template>

<script>
  import {
    listProvince,
    listCity,
    listDistrict
  } from '@/api/area/area'
  export default {
    components: {},
    props: {
      onChangeAddressCode: Function
    },
    data() {
      return {
        provinceList: [],
        cityList: [],
        districtList: [],
        selectProvinceCode: '',
        selectCityCode: '',
        selectDistrictCode: ''

      }
    },
    // 初始化页面
    created() {
      // 获取省列表
      listProvince().then(response => {
        this.provinceList = response.data
      })
    },
    methods: {
      // 获取地址-市
      changeCity(initData, provinceCode, cityCode, districtCode) {
        this.cityList = []
        this.districtList = []
        this.selectCityCode = ''
        this.selectDistrictCode = ''
        if (provinceCode) {
          listCity(provinceCode).then(response => {
            this.cityList = response.data
          })
          this.selectCityCode = cityCode
          this.changeDistrict(initData, cityCode, districtCode)
        } else {
          if (!initData) {
            this.onChangeAddressCode(this.selectProvinceCode, this.selectCityCode, this.selectDistrictCode, this.getProvinceName(), this.getCityName(), this.getDistrictName())
          }
        }
      },
      // 获取地址-区
      changeDistrict(initData, cityCode, districtCode) {
        this.districtList = []
        this.selectDistrictCode = ''
        if (cityCode) {
          listDistrict(cityCode).then(response => {
            this.districtList = response.data
          })
          this.selectDistrictCode = districtCode
        }
        if (!initData) {
          this.onChangeAddressCode(this.selectProvinceCode, this.selectCityCode, this.selectDistrictCode, this.getProvinceName(), this.getCityName(), this.getDistrictName())
        }
      },
      changeStreet(districtCode) {
        this.onChangeAddressCode(this.selectProvinceCode, this.selectCityCode, this.selectDistrictCode, this.getProvinceName(), this.getCityName(), this.getDistrictName())
      },
      // 设置初始化值
      setData(pCode, cCode, dCode) {
        if (pCode) {
          this.selectProvinceCode = pCode
          if (cCode) {
            this.selectCityCode = cCode
          }
          if (dCode) {
            this.selectDistrictCode = dCode
          }
          this.changeCity(true, this.selectProvinceCode, this.selectCityCode, this.selectDistrictCode, this.getProvinceName(), this.getCityName(), this.getDistrictName())
        }
      },
      // 获取 省市区名称
      getPCDName() {
        return this.getProvinceName() + this.getCityName() + this.getDistrictName()
      },
      // 获取省份名称
      getProvinceName() {
        if (this.selectProvinceCode && this.provinceList && this.provinceList.length > 0) {
          const area = this.provinceList.find((item) => {
            return item.areaCode === this.selectProvinceCode
          })
          if (area) {
            return area.areaName
          }
        }
        return ''
      },
      // 获取城市名称
      getCityName() {
        if (this.selectCityCode && this.cityList && this.cityList.length > 0) {
          const area = this.cityList.find((item) => {
            return item.areaCode === this.selectCityCode
          })
          if (area) {
            return area.areaName
          }
        }
        return ''
      },
      // 获取区名称
      getDistrictName() {
        if (this.selectDistrictCode && this.districtList && this.districtList.length > 0) {
          const area = this.districtList.find((item) => {
            return item.areaCode === this.selectDistrictCode
          })
          if (area) {
            return area.areaName
          }
        }
        return ''
      }
    }
  }
</script>

<style>
</style>
